<!--分期还款订单-->
<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.installmentRepaymentOrder')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item prop="userId" label="">
                            <el-input v-model="form.userId" placeholder="UserId" clearable></el-input>
                        </el-form-item>
                    </el-col>
                <!--<el-col :span="6">
                        <el-form-item prop="withdrawAccount" label="">
                            <el-input v-model="form.withdrawAccount" :placeholder="$t('common.receiptAccount')" clearable>&lt;!&ndash;收款账号&ndash;&gt;</el-input>
                        </el-form-item>
                    </el-col>-->
                    <el-col :span="6">
                        <el-form-item prop="userPhone" label="">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')" clearable><!--手机号码--></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item prop="orderId" label="">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable><!--内部订单号--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item prop="isOverdue" label="">
                            <el-select v-model="form.isOverdue" clearable :placeholder="$t('common.overdueStatus')" style="width: 100%"><!--逾期状态-->
                                <el-option key="" :label="$t('common.all')" value=""></el-option>
                                <el-option key="1" :label="$t('common.hasOverdue')" value="1"></el-option>
                                <el-option key="0" :label="$t('common.notOverdue')" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item prop="actRepayTime" label=""><!--放款时间-->
                          <el-date-picker
                                  style="width:100%"
                                  v-model="form.actRepayTime"
                                  type="datetimerange"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  value-format="timestamp"
                                  range-separator="-"
                                  :default-time="['00:00:00', '23:59:59']"
                                  :start-placeholder="$t('common.actRepayStartTime')"
                                  :end-placeholder="$t('common.actRepayEndTime')"></el-date-picker>
                      </el-form-item>
                    </el-col>
                  <el-col :span="6">
                      <el-form-item>
                          <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                          <el-button @click="exportExcel" icon="el-icon-upload2" type="primary">{{ $t('common.export') }}</el-button>
                      </el-form-item>
                  </el-col>
                </el-row>
            </el-form><!--el-form end-->
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" style="width: 100%;" :highlight-current-row="true" :max-height="tableMaxHeight">
                        <el-table-column label="UserId" prop="userId" min-width="140"></el-table-column>
                        <el-table-column :label="$t('common.name')"  prop="userName" min-width="150"></el-table-column><!--姓名-->
                        <el-table-column :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column  prop="orderId" :label="$t('common.innerOrderId')" width="180"></el-table-column>
                        <!-- 内部订单号 -->
                        <el-table-column :label="$t('common.mobileNumber')" prop="userPhone" width="150"></el-table-column><!--手机号码-->
                        <el-table-column :label="$t('common.shouldRepayTime')" prop="repayTime" min-width="180"><!--应还时间-->
                            <template slot-scope="{ row }">{{ row.repayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.actRepayTime')" prop="repayYesTime" width="180"><!--实际还款时间-->
                            <template slot-scope="{ row }">{{ row.repayYesTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>

                        <el-table-column :label="$t('common.borrowingCycle')"  prop="periodDays" min-width="150"></el-table-column><!--借款期限-->
                        <el-table-column :label="$t('common.contractAmount')" prop="contractAmount" min-width="120">
                            <template slot-scope="{ row }">{{ row.contractAmount | formatCurrency }}</template><!--合同金额-->
                        </el-table-column>
                        <el-table-column :label="$t('finance.amountDueThisPeriod')" prop="lateRepay" min-width="120">
                            <template slot-scope="{ row }">{{ row.lateRepay | formatCurrency }}</template>
                        </el-table-column><!--本期应还金额	-->
                        <el-table-column prop="payedAmount" sortable="custom" :label="$t('common.actRepayAmount')" width="140"><!--实还金额-->
                            <template slot-scope="{ row }">{{ row.payedAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.overdueDays')" prop="lateDays" min-width="120"><!--逾期天数-->
                            <template slot-scope="{ row }">{{ row.lateDays ? (row.lateDays + $t('common.day')) : '--' }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.coupons')" prop="ticketRepayAmount" width="100">
                            <template slot-scope="{ row }">{{ row.ticketRepayAmount > 0 ? row.ticketRepayAmount : '--' }}</template>
                        </el-table-column><!--优惠券-->
                        <el-table-column :label="$t('common.actualCreditAmount')" prop="realPayedAmount" width="120"><!--实际入账金额-->
                            <template slot-scope="{ row }">{{ row.realPayedAmount | formatCurrency }}</template>
                        </el-table-column>
                         <el-table-column :label="$t('common.repayFee')" prop="repayFee" width="100"><!--还款手续费-->
                            <template slot-scope="{ row }">{{ row.repayFee | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.addFee')" prop="tax" width="100"><!--增值税-->
                            <template slot-scope="{ row }">{{ row.tax | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.remitAmount')" prop="csDerateAmount" min-width="120"><!--减免金额-->
                            <template slot-scope="{ row }">{{ row.csDerateAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.penaltyRate')" prop="lateCharge" width="100">
                            <template slot-scope="{ row }">{{ row.lateCharge | formatCurrency }}</template><!--罚息-->
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.loanCompleteTime')" prop="startTime" min-width="150"><!--放款完成时间-->
                            <template slot-scope="{ row }">{{ row.startTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.currentCycleBorrowing')" prop="currentPeriod" min-width="150"><!--借款当前周期-->
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.totalLoanPeriod')" prop="totalPeriods" min-width="150"><!--借款总周期-->
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div><!--module_content-->
            </div>
        </div><!--module_content-->
        <!-- 逾期天数冲正申请 -->
        <el-dialog :title="$t('finance.overdueDaysApply')" :visible.sync="dialogApplyCorrection" width="550px">
            <el-form :model="formApplyCorrection">
                <el-form-item :label="$t('common.borrowerName') + ':'" :label-width="formLabelWidth"><!--借款人姓名-->
                    {{formApplyCorrection.userName}}
                </el-form-item>
                <el-form-item :label="$t('common.innerOrderId') + ':'" :label-width="formLabelWidth"><!--内部订单号-->
                    <el-input v-model="formApplyCorrection.orderId" auto-complete="off" readonly></el-input>
                </el-form-item>
                <el-form-item :label="$t('finance.overdueCorrection') + ':'" :label-width="formLabelWidth"><!--逾期冲正天数-->
                    <el-input v-model="formApplyCorrection.correctDay" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item :label="$t('finance.overdueCorrectionType') + ':'" :label-width="formLabelWidth"><!--逾期天数冲正类型-->
                    <el-select v-model="formApplyCorrection.correctReason" :placeholder="$t('verify.plsChoose')">
                        <el-option :label="$t('finance.errorOverdueCorrection')" value="异常逾期天数冲正"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogApplyCorrection = false">{{ $t('common.cancel') }}</el-button>
                <el-button type="primary" @click="submitApplyCorrection">{{ $t('common.confirm') }}</el-button>
            </div>
        </el-dialog>
        <!-- 逾期天数冲正申请 -->
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import {keyMap} from '@/config';
    import SelectAppList from '@/components/select-app-list';

    export default {
        name: 'repayNotRepay',
        components: {
            Pagination,
            SelectAppList
        },
        mixins: [mixin],
        data() {
            return {
                form: {
                    orderId: '',
                    userPhone: '',
                    // withdrawAccount: '',
                    userId: '',
                    // applyTime: '',
                    actRepayTime: '',
                    // lateDaysType: '',
                    // product: '',
                    isOverdue: '',
                    appName: '',
                },
                rules: {
                    orderId: [],
                    userPhone: [],
                    // withdrawAccount: [],
                    userId: [],
                    // applyTime: [],
                    actRepayTime: [],
                    // lateDaysType: [],
                    isOverdue: [],
                },
                overdueType: keyMap.overdueType,
                keyMap,
                formApplyCorrection: {
                    name: '',
                    orderId: '',
                    correctDay: '',
                    correctReason: this.$t('finance.errorOverdueCorrection')
                },
                dialogApplyCorrection: false,
                formLabelWidth: this.$i18n.locale === 'en' ? '220px' : '130px'
            };
        },
        methods: {
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.finance.repay.repayPeriodList(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                    }
                });
            },
            search() {
                this.page.currentPage = 1;
                this.getTableData();
            },
            exportExcel() {
                const params = this.fillParams();
                const user = this.$storage.get('user');
                const language = this.$storage.getLocal('language');
                params.language = language;
                params.token = user.token;
                const {$apiConf} = this;
                const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.finance.repay.repayPeriodListExcel, ['page']);
                this.$openNewBlank(url);
            },
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    orderId: '',
                    userPhone: '',
                    // withdrawAccount: '',
                    userId: '',
                    // applyTimeStart: '',
                    // applyTimeEnd: '',
                    actualRepaytimeStart: '',
                    actualRepaytimeEnd: '',
                    // product: '',
                    isOverdue: '',
                    appName: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key] && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                // if (form.lateDaysType == '3' || form.lateDaysType == '2' || form.lateDaysType == '1') {
                    // params.loanExtensionTimes = form.lateDaysType;
                    // params.lateDaysType = '';
                    // params.loanExtensionTimess = '';
                // }
                // if (form.lateDaysType == '0') {
                    // params.loanExtensionTimes = '';
                    // params.lateDaysType = '';
                    // params.loanExtensionTimess = form.lateDaysType;
                // }
                // if (form.lateDaysType != '3' && form.lateDaysType != '2' && form.lateDaysType != '1' && form.lateDaysType != '0' && form.lateDaysType != '') {
                    // params.loanExtensionTimes = '';
                    // params.lateDaysType = form.lateDaysType;
                    // params.loanExtensionTimess = '';
                // }
                // if (form.lateDaysType == '') {
                    // params.loanExtensionTimes = '';
                    // params.lateDaysType = '';
                    // params.loanExtensionTimess = '';
                // }
                // if (form.applyTime) {
                    // params.applyTimeStart = form.applyTime[0];
                    // params.applyTimeEnd = form.applyTime[1];
                // }
                if (form.actRepayTime) {
                    params.actualRepaytimeStart = form.actRepayTime[0];
                    params.actualRepaytimeEnd = form.actRepayTime[1];
                };
                return params;
            },
            applyCorrection(row) {
                this.dialogApplyCorrection = true;
                this.formApplyCorrection = Object.assign({
                    name: '',
                    orderId: '',
                    correctDay: '',
                    correctReason: this.$t('finance.errorOverdueCorrection')
                }, row);
                this.formApplyCorrection.correctDay = '';
            },
            submitApplyCorrection() {
                //如订单已经进行 金额减免操作（无论审核通过还是未通过都不可以操作天数冲正）
                if (parseInt(this.formApplyCorrection.correctDay) > parseInt(this.formApplyCorrection.lateDays)) {
                    this.$message.error(this.$t('finance.correctionCanNotMoreOverdueDay'));//冲正天数不可大于逾期天数
                } else {
                    let params = {
                        userId: this.formApplyCorrection.userId,
                        orderId: this.formApplyCorrection.orderId,
                        correctReason: this.formApplyCorrection.correctReason,
                        correctDay: this.formApplyCorrection.correctDay,
                    }
                    this.$api.finance.repay.addRepayCorrect(params).then(res => {
                        const {status, error} = res;
                        if ('1' === status && '00000000' === error) {
                            this.dialogApplyCorrection = false;
                            this.getTableData();
                        }
                    });
                }

            }
        },
        created() {
            this.tableMaxHeight = document.body.clientHeight - 320;
            this.getTableData();
        }
    }
</script>
<style lang="scss" scoped>
    .cursor-pointer {
        cursor: pointer;
    }
</style>
